import React, { useContext } from 'react'
import hoistStatics from 'hoist-non-react-statics'
import { RouterContext } from '..'

// 对于一些非子组件的组件，使用HOC嵌入路由属性
const withRouter = (Component) => {
  const WrapComponent = (props) => {
    // hoistStatics 提供了几个方法，可以让被withRouter嵌套的组件获取到原组件的方法和ref
    // rc-form 提供了 wrappedComponentRef, 用于处理 HOC高阶组件中ref丢失的问题
    const { wrappedComponentRef, ...remainingProps } = props
    const context = useContext(RouterContext)
    return (
      <Component {...remainingProps} ref={wrappedComponentRef} {...context} />
    )
  }
  // 为了避免使用 withRouter 的组件内部有静态属性，使用 hoistStatics 对其内部静态方法进行赋值嵌套
  return hoistStatics(WrapComponent, Component)
}

export default withRouter
